<script setup>
  import { useUserStore } from '@/stores'
  import { ENABLE_OFFICIAL_QR, BRAND_NAME } from '@/config/feature'
  const userStore = useUserStore()

  const goToLoginPage = () => {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }

  // 退出登录
  const onLogout = () => {
    // 询问
    uni.showModal({
      title: '温馨提示',
      content: '确定退出么?',
      success: async (res) => {
        if (res.confirm) {
          // 点击了确定
          // 封装退出登录action函数：清空token和userInfo
          await userStore.logoutAction()
        }
      }
    })
  }

  const goToEditPage = () => {
    uni.navigateTo({
      url: '/pages/edit/edit'
    })
  }
</script>

<template>
  <view class="mine mine-page">
    <!-- 顶部 -->
    <view class="header">
      <view class="info">
        <!-- 已登录 -->
        <template v-if="userStore.token">
          <image
            class="avatar"
            :src="userStore.userInfo.avatar"
            mode="scaleToFill"
          />
          <text class="text">{{ userStore.userInfo.nickName }}</text>
        </template>
        <!-- 未登录 -->
        <template v-else>
          <bit-icon name="morentouxiang" size="118" />
          <text class="text" @click="goToLoginPage">点击登录</text>
        </template>
      </view>
    </view>
    <!-- 主体 -->
    <view class="main">
      <!-- 登录成功态：仅此处改动 -->
      <view v-if="userStore.token" class="auth-panel">
        <view class="auth-body center-narrow">

          <!-- ① 品牌卡（保留，使用统一logo） -->
          <view class="brand-card">
            <image class="brand-logo" src="https://study-test-huangyi.oss-cn-beijing.aliyuncs.com/study-test/web/profile/logo.png?x-oss-credential=LTAI5t7pBt49prZPvkWgKP2W%2F20250929%2Fcn-beijing%2Foss%2Faliyun_v4_request&x-oss-date=20250929T002713Z&x-oss-expires=3600&x-oss-signature-version=OSS4-HMAC-SHA256&x-oss-signature=aa5ea3e7a066ad95121b1b509bbb8f82787320a515c98adfe6ee27c9c9a4e8ca" mode="widthFix" />
          </view>

          <!-- ② 服务承诺（真房源 / 合同保障 / 隐私保护） -->
          <view class="panel-section badge-row">
            <view class="badge"><view class="badge-dot"></view><text>真房源</text></view>
            <view class="badge"><view class="badge-dot"></view><text>合同保障</text></view>
            <view class="badge"><view class="badge-dot"></view><text>隐私保护</text></view>
          </view>

          <!-- ③ 租前小贴士（静态文案） -->
          <view class="panel-section tips-card">
            <text class="sec-title">租前小贴士</text>
            <view class="tip-row"><view class="dot"></view><text>核对房源信息与证件，避免线下转账。</text></view>
            <view class="tip-row"><view class="dot"></view><text>签约前确认合同条款与费用明细。</text></view>
            <view class="tip-row"><view class="dot"></view><text>保护隐私信息，请遵守《隐私政策》。</text></view>
          </view>

          <!-- ④ 编辑资料 -->
          <view class="link" @click="goToEditPage">
            <text class="text">编辑资料</text>
            <bit-icon name="fanhui-right" size="26" />
          </view>

          <!-- 二维码区：代码保留，但默认不渲染 -->
          <view v-if="ENABLE_OFFICIAL_QR" class="qrCode">
            <image
              class="qrCodeImage"
              src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/bit-qrcode.png"
              mode="scaleToFill"
              show-menu-by-longpress
            />
            <text class="text">扫二维码</text>
            <text class="text">关注"比特就业课"公众号</text>
          </view>

        </view>
      </view>

      <!-- 未登录：蓝框整体自适应铺满 -->
      <view v-if="!userStore.token" class="guest-panel">
        <!-- 新增 center-narrow：控制整体居中与最大宽 -->
        <view class="panel-body center-narrow">
          
          <!-- ① 登录后可用（原来的三卡片） -->
          <view class="panel-section">
            <text class="sec-title">登录后可用</text>
            <view class="preview-grid">
              <view class="p-item" @tap="goToLoginPage">
                <view class="p-ico"><view class="p-lock"></view></view>
                <text class="p-title">收藏房源</text>
                <text class="p-sub">同步收藏到云端</text>
              </view>
              <view class="p-item" @tap="goToLoginPage">
                <view class="p-ico"><view class="p-lock"></view></view>
                <text class="p-title">消息聚合</text>
                <text class="p-sub">重要提醒不遗漏</text>
              </view>
              <view class="p-item" @tap="goToLoginPage">
                <view class="p-ico"><view class="p-lock"></view></view>
                <text class="p-title">在线签约</text>
                <text class="p-sub">流程更快更省心</text>
              </view>
            </view>
          </view>

          <!-- ② 租前小贴士 -->
          <view class="panel-section">
            <text class="sec-title">租前小贴士</text>
            <view class="tip-row"><view class="dot"></view><text>核对房源信息与证件，避免线下转账。</text></view>
            <view class="tip-row"><view class="dot"></view><text>签约前确认合同条款与费用明细。</text></view>
            <view class="tip-row"><view class="dot"></view><text>保护隐私信息，请遵守《隐私政策》。</text></view>
          </view>

          <!-- ③ 开始使用 · 三步走 -->
          <view class="panel-section">
            <text class="sec-title">开始使用 · 3 步走</text>
            <view class="steps">
              <view class="step">
                <view class="circle">1</view>
                <text class="st-title">浏览房源</text>
                <text class="st-desc">在首页按区域/租金/户型筛选</text>
              </view>
              <view class="divider"></view>
              <view class="step">
                <view class="circle">2</view>
                <text class="st-title">登录认证</text>
                <text class="st-desc">一键登录更省心</text>
              </view>
              <view class="divider"></view>
              <view class="step">
                <view class="circle">3</view>
                <text class="st-title">在线签约</text>
                <text class="st-desc">流程更快更清晰</text>
              </view>
            </view>
          </view>

          <!-- ④ 底部 CTA（去首页 / 立即登录） -->
          <!-- CTA：新增 cta--stack 竖排 -->
          <view class="panel-cta cta--stack">
            <button class="btn-ghost btn-wide" @tap="() => uni.switchTab({ url: '/pages/index/index' })">去首页找房</button>
            <button class="btn-primary btn-wide" @tap="goToLoginPage">立即登录</button>
          </view>
          
        </view>
      </view>
      <!-- 退出按钮 -->
      <button
        class="btn-login"
        plain
        v-if="userStore.token"
        @click="onLogout"
      >
        退出登录
      </button>
    </view>
  </view>
</template>

<style lang="scss">
  @import '@/styles/variables.scss';
  
  /* 让页面成为列布局基座 */
  .mine-page {
    min-height: 100vh;             /* 占满视口高度 */
    display: flex; 
    flex-direction: column;
    padding-bottom: 24rpx;         /* 防止被 tabbar 贴住 */
  }
  
  .mine {
    .header {
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      height: 354rpx;
      padding: 30rpx;
      background: linear-gradient(
        to right bottom,
        $bg-color-from,
        $bg-color-to
      );

      .info {
        display: flex;
        height: 118rpx;
        align-items: center;
        .avatar {
          width: 118rpx;
          height: 118rpx;
          border-radius: 50%;
        }
        .text {
          margin-left: 23rpx;
          font-size: 36rpx;
          font-weight: 600;
          color: $font-color-white;
        }
      }
    }
    .main {
      flex: 1;                       /* 让main占据头像区下方的所有剩余高度 */
      padding: 20rpx 30rpx;
      background-color: $bg-color-shallow;
      .link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        padding: 0 33rpx 0 57rpx;
        border-radius: 16rpx;
        background: $bg-color-white;
      }
      .text {
        font-size: $font-size-md-28;
        color: $font-color-dark;
        font-weight: 600;
      }
      /* 占位与旧块 */
      .qrCode {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 20rpx 0 30rpx;
        padding: 266rpx 0 124rpx;
        background: $bg-color-white;
        border-radius: 16rpx;
        .qrCodeImage {
          width: 280rpx;
          height: 280rpx;
          margin-bottom: 22rpx;
        }
      }
      
      /* 蓝框外层：占据剩余空间 */
      .guest-panel {
        flex: 1;                       /* 关键：占据头像区下方的所有剩余高度 */
        margin: 12rpx 0; 
        border-radius: 24rpx;
        background: #F6FBF8;           /* 很浅的品牌绿背景 */
        box-shadow: 0 12rpx 28rpx rgba(7,193,96,.06);
        display: flex;                 /* 让内部继续用 flex */
      }

      /* 蓝框主体：垂直分布四个区块 */
      .panel-body {
        flex: 1;
        display: flex; 
        flex-direction: column;
        padding: 18rpx;
        /* 四个区块按可用高度做均匀分布（不拥挤） */
        gap: 16rpx;                    /* 区块间固定间距 */
      }

      /* 新增：限定最大宽度并水平居中（蓝框内所有内容整体居中） */
      .center-narrow { 
        max-width: 700rpx; 
        margin: 0 auto; 
        width: 100%; 
      }

      /* 每个功能段落保持白卡样式 */
      .panel-section {
        background: $bg-color-white;
        border-radius: 20rpx;
        padding: 18rpx;
        box-shadow: 0 8rpx 20rpx rgba(7,193,96,.06);
      }

      /* CTA：竖排 + 缩小尺寸，避免"头脚轻" */
      .panel-cta {
        margin-top: auto; 
        display: flex; 
        gap: 12rpx;
      }
      
      .panel-cta.cta--stack { 
        flex-direction: column; 
        align-items: stretch; 
      }
      
      .panel-cta .btn-wide { 
        width: 100%; 
        height: 84rpx; 
        line-height: 84rpx; 
        border-radius: 42rpx; 
        font-size: 30rpx;
        font-weight: 700;
        text-align: center;
        border: none;
      }
      
      .panel-cta .btn-primary { 
        background: #07C160; 
        color: #fff; 
        box-shadow: 0 12rpx 24rpx rgba(7,193,96,.18); 
      }
      
      .panel-cta .btn-ghost { 
        background: $bg-color-white; 
        color: #2E3A44; 
        border: 2rpx solid rgba(7,193,96,.35); 
      }

      /* 区块标题 */
      .sec-title { 
        display: block; 
        margin-bottom: 12rpx; 
        font-size: 28rpx; 
        font-weight: 700; 
        color: #2E3A44; 
      }

      /* 功能预览网格微调为居中 */
      .preview-grid {
        display: grid; 
        grid-template-columns: repeat(3, minmax(160rpx, 1fr)); 
        justify-items: center;
        gap: 16rpx;
      }
      
      .p-item {
        background: $bg-color-white; 
        border-radius: 20rpx; 
        padding: 20rpx 12rpx; 
        text-align: center;
        box-shadow: 0 8rpx 20rpx rgba(7,193,96,.06);
      }
      
      .p-ico {
        width: 72rpx; 
        height: 72rpx; 
        margin: 0 auto 8rpx; 
        border-radius: 16rpx; 
        background: rgba(7,193,96,.12);
        position: relative;
      }
      
      .p-lock {
        position: absolute; 
        right: -6rpx; 
        top: -6rpx; 
        width: 28rpx; 
        height: 28rpx; 
        border-radius: 50%; 
        background: #07C160;
        box-shadow: 0 4rpx 10rpx rgba(7,193,96,.18);
      }
      
      .p-title { 
        display: block; 
        font-size: 26rpx; 
        color: #2E3A44; 
        font-weight: 600; 
      }
      
      .p-sub { 
        display: block; 
        font-size: 22rpx; 
        color: #5B6670; 
        opacity: 0.9; 
        margin-top: 4rpx; 
      }

      /* 租前小贴士内容 */
      .tip-row { 
        display: flex; 
        align-items: flex-start; 
        gap: 12rpx; 
        margin-top: 10rpx; 
      }
      
      .tip-row:first-of-type { 
        margin-top: 0; 
      }
      
      .dot { 
        width: 12rpx; 
        height: 12rpx; 
        border-radius: 50%; 
        background: #07C160; 
        margin-top: 10rpx; 
      }

      /* 三步走保持等距 */
      .steps {
        display: flex; 
        align-items: stretch; 
        justify-content: space-between; 
        gap: 16rpx;
        padding: 18rpx; 
        background: $bg-color-white; 
        border-radius: 24rpx;
        box-shadow: 0 12rpx 28rpx rgba(7,193,96,.06);
        background-image: linear-gradient(180deg, rgba(7,193,96,.03), rgba(7,193,96,.01));
      }
      
      .step {
        flex: 1; 
        min-width: 0; 
        text-align: center; 
        padding: 0 4rpx;
        display: flex; 
        flex-direction: column; 
        align-items: center;
      }
      
      .circle {
        width: 64rpx; 
        height: 64rpx; 
        border-radius: 50%;
        background: #07C160; 
        color: #fff; 
        font-size: 28rpx; 
        font-weight: 700;
        display: flex; 
        align-items: center; 
        justify-content: center;
        box-shadow: 0 10rpx 20rpx rgba(7,193,96,.18);
        margin-bottom: 10rpx;
      }
      
      .st-title { 
        font-size: 26rpx; 
        color: #2E3A44; 
        font-weight: 600; 
      }
      
      .st-desc { 
        font-size: 22rpx; 
        color: #5B6670; 
        opacity: 0.9; 
        margin-top: 4rpx; 
      }

      /* 连接线（在三段之间） */
      .divider {
        width: 24rpx;
        background: linear-gradient(90deg, rgba(7,193,96,.18), rgba(7,193,96,.08));
        border-radius: 12rpx;
        margin: 0 4rpx;
      }

      /* 登录成功页的外层：不改变布局节奏，只负责撑满与居中 */
      .auth-panel {
        flex: 1;
        margin: 12rpx 0;
        border-radius: 24rpx;
        background: #F6FBF8;
        box-shadow: 0 12rpx 28rpx rgba(7,193,96,.06);
        display: flex;
      }
      
      .auth-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        padding: 18rpx;
      }

      /* 品牌卡与 logo 的居中与尺寸 */
      .brand-card {
        background: $bg-color-white;
        border-radius: 20rpx;
        padding: 18rpx;
        box-shadow: 0 8rpx 20rpx rgba(7,193,96,.06);
        text-align: center;
      }
      
      .brand-logo {
        display: block;
        width: 420rpx;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
      }

      /* ② 服务承诺（徽章行） */
      .badge-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12rpx;
      }
      
      .badge {
        flex: 1;
        min-width: 0;
        height: 64rpx;
        border-radius: 48rpx;
        background: #F6FBF8;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10rpx;
        font-size: 26rpx;
        color: #2E3A44;
        font-weight: 600;
      }
      
      .badge-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #07C160;
      }

      /* ③ 租前小贴士样式（与未登录态保持一致） */
      .tips-card {
        background: $bg-color-white;
        border-radius: 20rpx;
      }
      .btn-login {
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 16rpx;
        font-size: $font-size-md-28;
        font-weight: 600;
        color: $font-color-middle;
        background: $bg-color-white;
        border: none;
      }
    }
  }
</style>
